<template>
    <div class="device-management-container">
        <!-- 搜索区域 -->
        <el-card class="search-card">
            <el-form :model="queryParams" :inline="true">
                <el-form-item label="设备名称">
                    <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable
                        @keyup.enter="handleSearch" />
                </el-form-item>
                <el-form-item label="设备类型">
                    <el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" clearable style="width: 240px;" >
                        <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="设备状态">
                    <el-select v-model="queryParams.status" placeholder="请选择设备状态" clearable style="width: 240px;">
                        <el-option label="正常" value="1" />
                        <el-option label="故障" value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
                    <el-button @click="handleReset" :icon="Refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 操作区域 -->
        <el-card class="operation-card">
            <div class="operation-buttons">
                <el-button type="primary" @click="handleAdd" :icon="Plus">添加设备</el-button>
                <el-button type="danger" @click="handleBatchDelete(selectedRows)" :icon="Delete"
                    :disabled="selectedRows.length === 0">
                    批量删除
                </el-button>
            </div>
        </el-card>

        <!-- 设备列表 -->
        <el-card>
            <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" stripe>
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="设备ID" width="100" />
                <el-table-column prop="deviceName" label="设备名称" min-width="120" />
                <el-table-column prop="deviceType" label="设备类型" width="100" />
                <el-table-column prop="location" label="设备位置" min-width="150" />
                <el-table-column prop="status" label="设备状态" width="100">
                    <template #default="{ row }">
                        <el-tag :type="getStatusDisplay(row.status).type">
                            {{ getStatusDisplay(row.status).label }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180">
                    <template #default="{ row }">
                        {{ formatTime(row.createTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="handleEdit(row)" :icon="Edit">编辑</el-button>
                        <el-button type="danger" link @click="handleDelete(row.id)" :icon="Delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination v-model:current-page="queryParams.page" v-model:page-size="queryParams.size"
                    :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-card>

        <!-- 设备表单对话框 -->
        <el-dialog v-model="formVisible" :title="deviceForm.id ? '编辑设备' : '添加设备'" width="500px">
            <el-form ref="formRef" :model="deviceForm" :rules="formRules" label-width="80px">
                <el-form-item label="设备名称" prop="deviceName">
                    <el-input v-model="deviceForm.deviceName" placeholder="请输入设备名称" />
                </el-form-item>
                <el-form-item label="设备类型" prop="deviceType">
                    <el-select v-model="deviceForm.deviceType" placeholder="请选择设备类型" style="width: 100%">
                        <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="设备位置" prop="location">
                    <el-input v-model="deviceForm.location" placeholder="请输入设备位置" />
                </el-form-item>
                <el-form-item label="设备状态" prop="status">
                    <el-radio-group v-model="deviceForm.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="0">故障</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="formVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit" :loading="formLoading">
                    确定
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search, Refresh, Plus, Delete, Edit } from '@element-plus/icons-vue'
import { useDevice } from '../hooks/useDevice'

// 使用设备管理hooks
const {
    deviceList,
    loading,
    total,
    queryParams,
    deviceForm,
    formVisible,
    formLoading,
    deviceTypeOptions,
    fetchDeviceList,
    handleSearch,
    handleReset,
    handleAdd,
    handleEdit,
    handleSubmit,
    handleDelete,
    handleBatchDelete,
    getStatusDisplay
} = useDevice()

// 选择的行
const selectedRows = ref([])

// 表单验证规则
const formRules = {
    deviceName: [
        { required: true, message: '请输入设备名称', trigger: 'blur' }
    ],
    deviceType: [
        { required: true, message: '请选择设备类型', trigger: 'change' }
    ],
    location: [
        { required: true, message: '请输入设备位置', trigger: 'blur' }
    ]
}

// 选择变化
const handleSelectionChange = (selection) => {
    selectedRows.value = selection
}

// 分页大小变化
const handleSizeChange = (size) => {
    queryParams.size = size
    queryParams.page = 1
    fetchDeviceList()
}

// 当前页变化
const handleCurrentChange = (page) => {
    queryParams.page = page
    fetchDeviceList()
}

// 格式化时间
const formatTime = (time) => {
    if (!time) return ''
    return new Date(time).toLocaleString('zh-CN')
}

onMounted(() => {
    fetchDeviceList()
})

</script>

<style scoped>
.device-management-container {
    padding: 20px;
}

.search-card {
    margin-bottom: 20px;
}

.operation-card {
    margin-bottom: 20px;
}

.operation-buttons {
    display: flex;
    gap: 10px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  padding: 20px;
}
</style>